import { EventBus } from '@/store/index'
import { isJSON, getCompIdByParam } from '@/plugins/utils'
import { getPxOVwByValue, getPxOrVw } from '@/store/utils'
import { isHasOwnProperty } from '@/plugins/utils'
import { convertCss } from '@/store/utils'

export const process = {
  data () {
    return {
      isOpen: true,
      percent: 0,
    }
  },
  created () {
    if(this.isH5Edit || this.commonAttr.groupInjectClassName){
      if(this.isH5Edit){
        //啥也不做
      }else{
        EventBus.$off("clickAddProcess", this.onIntervalAssetsProcess);
        EventBus.$on("clickAddProcess", this.onIntervalAssetsProcess);
        this.item.vueContainer = this;
      }
    }else{
      if(this.commonAttr.isLoadAssets){
        EventBus.$off("loadAssetsProcess", this.onLoadAssetsProcess);
        EventBus.$on("loadAssetsProcess", this.onLoadAssetsProcess);
      }
      const relateAttrCompId = getCompIdByParam(this.commonAttr.relateAttrCompId);
      const relateCompData = this.componentMap[relateAttrCompId];
      if(this.numberItemData || relateAttrCompId && relateCompData.events.number || this.item.events.interactionData){
        EventBus.$off("refreshDynamicData", this.onRefreshNumber)
        EventBus.$on("refreshDynamicData", this.onRefreshNumber)
      }
      this.onRefreshNumber();
    }
  },
  computed: {
    //垂直滚动条文本样式
    infoStyle(){
      let commonAttr = this.commonAttr
      return {
        textShadow: convertCss('0 0 4px ' + commonAttr.textShadowColor + ', -0 -0 2px ' + commonAttr.textShadowColor + '')
      }
    },
    //横向滚动条样式
    markerStyle(){
      let commonAttr = this.item.commonAttr
      let unit = getPxOrVw()
      const paddings = commonAttr.padding.split(' ')
      let style_ = {
        textShadow: convertCss('0 0 4px ' + commonAttr.textShadowColor + ', -0 -0 2px ' + commonAttr.textShadowColor + ''),
        padding: paddings[0] + unit + ' ' + paddings[1] + unit + ' ' + paddings[2] + unit + ' ' + paddings[3] + unit
      };
      if(commonAttr.percentStyle){
        let styles = commonAttr.percentStyle.split(",");
        if(styles[1]){
          _.merge(style_, {
            top: getPxOVwByValue(styles[0]),
            width: getPxOVwByValue(styles[1]),
            height: getPxOVwByValue(styles[2]),
            backgroundColor: styles[3],
            borderRadius: getPxOVwByValue(styles[4]),
            left: getPxOVwByValue(styles[5]),
          });
        }else{
          style_.top = getPxOVwByValue(styles[0]);
        }
      }
      return  style_
    },
    markerPointStyle(){
      let commonAttr = this.item.commonAttr
      if(commonAttr.barPointUrl){
        let styles = commonAttr.barPointUrl.split(",");
        let wid = styles[1] ? styles[1] : 54;
        wid = parseInt(wid);
        let hei = styles[2] ? styles[2] : 54;
        hei = parseInt(hei);
        let top = styles[3] ? styles[3] : -12;
        top = parseInt(top);
        let percent = this.percent/100 > 1 ? 1 : this.percent/100;
        percent = percent < 0 ? 0 : percent;
        let left = 0;
        let barPercent = wid/this.item.conAttr.width;
        if(percent > barPercent){
          left = parseInt(percent * this.item.conAttr.width);
        }
        if(percent >= 1){
          left = parseInt(percent * this.item.conAttr.width - wid);
        }
        left = left < 0 ? 0 : left;
        return {
          position: "absolute",
          width: getPxOVwByValue(wid),
          height: getPxOVwByValue(hei),
          top: getPxOVwByValue(top),
          left: getPxOVwByValue(left),
        };
      }else{
        return {}
      }
    },
    processData() {
      return this.wbData
    },
    triangleColor() {
      let unit = getPxOVwByValue(30)
      return {
        'border-right': unit + ' solid ' + this.commonAttr.triangleColor
      }
    },
    processBorderStyle(){
      let commonAttr = this.item.commonAttr
      let unit = getPxOrVw()
      let styles_ = {}
      styles_.padding = commonAttr.paddingTB + unit + ' ' + commonAttr.paddingLR + unit
      if(commonAttr.url && commonAttr.url.length > 0){
        styles_.backgroundImage = 'url(' + commonAttr.url + ')'
        styles_.backgroundRepeat = 'no-repeat'
        styles_.backgroundSize = 'cover'
        styles_.border = 'none'
      }else{
        styles_.border = commonAttr.borderSize + unit + ' ' +  commonAttr.borderStyle + ' ' + commonAttr.borderColor
        styles_.borderRadius = commonAttr.borderRadius + unit
        styles_.backgroundColor = commonAttr.backgroundColor
      }
      return styles_;
    },
    percentInfo(){
      //是list或者data
      let str = '';
      if(this.commonAttr.percentStr.indexOf('%') != -1){
        str = this.commonAttr.percentStr.replace("$num$", this.percent);
      }else{
        let num = this.processData.num;
        //千位分隔符
        if(this.commonAttr.isSeparator){
          // '10000000000'.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          num = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
        }
        str = this.commonAttr.percentStr.replace("$num$", num);
      }
      return str
    },
    maskStyle(){
      return {
        'clip-path': 'inset(0 '+ (100-this.percent)+'% 0 0)',
        '-webkit-clip-path': 'inset(0 '+ (100-this.percent)+'% 0 0)',
      }
    },
    barStyle(){
      let commonAttr = this.item.commonAttr
      let unit = getPxOrVw()
      let style_ = {
        width: this.percent + "%",
        borderRadius: commonAttr.borderRadius + unit
      }
      if(commonAttr.barUrl && commonAttr.barUrl.length > 0){
        // style_.backgroundImage = 'url(' + commonAttr.barUrl + ')';
      }else{
        style_.backgroundColor = commonAttr.barColor;
      }
      return style_
    },
  },
  mounted(){
    window.setTimeout(() => {
      this.isDelayTimeComplate = true;
      //素材在这个组件还没有初始化化就已经加载完了
      if(this.siteInfo.isLoadAssetsCompleteNotInitComp){
        this.percent = 100;
      }
      this.loadComplete();
    }, this.commonAttr.delayTime * 1000)
  },
  methods: {
    onRefreshNumber(){
      let percent = 0;
      let interactionEvent = this.item.events.interactionData;
      const relateAttrCompId = getCompIdByParam(this.commonAttr.relateAttrCompId);
      const relateCompData = this.componentMap[relateAttrCompId];
      if(relateCompData && relateCompData.events.interactionData) {
        interactionEvent = relateCompData.events.interactionData;
      }
      if(interactionEvent){
        //自定义进度信息
        const interactionStr = interactionEvent.comps[0].attrs.value;
        if(isJSON(interactionStr)){
          const interactionObj = JSON.parse(interactionStr);
          if(isHasOwnProperty(interactionObj, 'customKey')) {
            if(interactionObj.customKey == "generalTotal") {
              // 1743 为地球抗老 {"process":{"0":"10","1106":"30","1992":"55","5000":"76","11060":"100","1000000":100},"custom":"generalTotal"}
              const customKey = interactionObj.customKey;//generalTotal
              const processes = interactionObj.process;//{"1106":"25%"}

              let keyTotals = _.keys(processes);
              percent = this.getInteractionPercent(this.bindData[customKey], processes, keyTotals)
            }
          } else if(isHasOwnProperty(interactionObj, 'pk')) {
            if(this.processData) {
              percent = this.processData.process ? this.processData.process : 0;
            }
          } else if(isHasOwnProperty(interactionObj, 'compId')){
              // 2480 问候地球 {"process":{"0":"10","1106":"30","1992":"55","5000":"76","11060":"100","1000000":100},"compId":"4b799358-91b7-4131-93cd-d0ab02deb861"}
            const processes = interactionObj.process;//{"1106":"25%"}
            let keyTotals = _.keys(processes);
            percent = this.getInteractionPercent(this.processData.num, processes, keyTotals)
          }
        }
      }else if(this.processData){
        let total = 100;
        if(this.processData.total > 0){
          total = parseInt(this.processData.total);
        }
        percent = Math.round(this.processData.num/total * 100);
      }
      this.percent = percent > 100 ? 100 : percent;
    },
    getBarPointUrl(url){
      return url.split(',')[0];
    },
    onLoadAssetsProcess(process){
      this.percent = process;
      this.loadComplete();
    },
    onIntervalAssetsProcess(process){
      this.percent = process;
      this.loadComplete();
    },
    loadComplete(){
      if(this.percent >= 100 && this.commonAttr.pageId && this.isDelayTimeComplate && this.isOpen){
        this.isOpen = false;
        this.showPage(this.commonAttr.pageId);
      }
    },
    getInteractionPercent(currentNum,processes,keyTotals){
      let percent_ = 0
      let index = 0;
      for(let total_ in processes){
        percent_  = processes[total_];
        if(currentNum >= total_ && currentNum < keyTotals[index+1]){
          return percent_
        }
        index++;
      }
      return percent_
    }
  },
  beforeUnmount(){
    EventBus.$off("loadAssetsProcess", this.onLoadAssetsProcess);
    EventBus.$off("clickAddProcess", this.onIntervalAssetsProcess);
  }
}
